<template>
  <div>
    <mini-head :title="basicInfo.name ? basicInfo.name : $route.name" />
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in pics" :key="item.id">
          <img :src="item.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <p class="text">{{ basicInfo.name }}</p>
    <div v-html="content"></div>
    <!-- 底座 -->
    <div class="bottom">
      <van-goods-action>
        <van-goods-action-icon to="/home" icon="home-o" text="首页" />
        <van-goods-action-icon to="/cart" icon="shopping-cart-o" text="购物车" />
        <van-goods-action-button
          @click="show = true"
          color="#be99ff"
          type="warning"
          text="加入购物车"
        />
      </van-goods-action>
    </div>
    <!-- 弹出层 -->
    <div class="popup">
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '26%' }"
      >
        <van-card
          :price="basicInfo.minPrice"
          :desc="basicInfo.recommendStatusStr"
          :title="basicInfo.name"
          :thumb="basicInfo.pic"
        />
        <van-stepper v-model="value" />
        <van-button
          @click="sumb"
          size="large"
          round
          color="linear-gradient(to right, #ff6034, #d90dd9)"
        >
          确定
        </van-button>
      </van-popup>
    </div>
  </div>
</template>

<script>
import MiniHead from '../../components/MiniHead.vue'
import { getDetails } from '../../api/index'
import { mapActions } from 'vuex'
import { gettoken } from '../../utils'
export default {
  data () {
    return {
      basicInfo: {},
      content: '',
      pics: [],
      show: false,
      value: 1
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    // 加购
    sumb () {
      console.log(this.value, this.basicInfo.id)
      this.ADD_CART({
        goodsId: this.basicInfo.id,
        number: this.value,
        token: gettoken()
      })
      this.show = false
      // this.$router.go(-1)
    },
    ...mapActions('cart', ['ADD_CART']),
    getDetails () {
      console.log(this.$route.query.id)
      getDetails(this.$route.query.id).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.content = res.data.data.content.replace(
            /<img/gi,
            '<img style="display:block;width:100%;"'
          )
          this.pics = res.data.data.pics
        }
      })
    }
  },
  components: { MiniHead }
}
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  background-color: #39a9ed;
  width: 100%;
  height: 300px;
  img {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}
p {
  width: 100%;
  text-align: center;
  color: rgb(252, 167, 134);
  font-size: 30px;
}
.van-stepper {
  position: absolute;
  right: 8px;
  top: 74px;
}
.van-goods-action {
  background-color: rgb(234, 242, 253);
}
.van-goods-action-icon {
  background-color: rgb(234, 242, 253);
}
</style>
